import React from 'react';
import { useHistory } from 'react-router-dom';
import { CrownOutlined } from '@ant-design/icons';
import { Accordion, Icon, List, NavBar } from 'antd-mobile';
import mazes from 'modules/eox/json/maze.json';
// interface IMazeProps {}

/** 迷宫 */
function MazeFC() {
  const history = useHistory();

  return (
    <div className="whole-height">
      <NavBar
        icon={<Icon type="left" />}
        onLeftClick={() => { history.goBack(); }}
      >
        迷宫
      </NavBar>
      <Accordion style={{ height: 'calc(100vh - 45px)', overflow: 'auto' }}>
        {
          mazes.map((maze) => (
            <Accordion.Panel header={(
              <>
                <CrownOutlined className="mgr-4" />
                {maze.name}
              </>
              )}
            >
              <List>
                {
                  maze.children.map((child) => (
                    <List.Item arrow="horizontal">
                      {child.name}
                    </List.Item>
                  ))
                }
              </List>
            </Accordion.Panel>
          ))
        }
      </Accordion>
    </div>
  );
}

export default MazeFC;
